<template>
	<view class="index">
		<!-- 头部 -->
		<Header :title="'首页'"></Header>
		<!-- 搜索 -->
		<view class="search iconfont" @click="showAllModelFn">
			{{'\ue62b请输入模特信息'}}
		</view>
		<!-- 轮播图 -->
		<swiper indicator-dots="true">
			<swiper-item v-for="(img, key) in banners" :key="key"><image class="swiper-img" :src="img.pic" /></swiper-item>
		</swiper>
		<view class="new-model">
		 	<view class="new-model-title flex justify_between flex_center">
		 		<text class="title">通知公告</text>
		 		<text class="more" @click="navtoAdverse">查看更多</text>
		 	</view>
		 	<view class="notice-list">
		 		<view class="ellipsis" v-for="(item, index) in noticeList" :key="index" @click="navAdverseDetails(item.id)">
				<uni-icons class="icon" type="sound" color="#cfb787" size="12"></uni-icons>{{item.title}}</view>
		 	</view>
		</view>
		<view class="new-model">
			<view class="new-model-title flex justify_between flex_center">
				<text class="title">最新资源</text>
				<text class="more" @click="showAllModelFn">查看更多</text>
			</view>
			<view class="model-list clearfix">
				<model-item v-for="(item, index) in modelList" :key="index" :data="item" type="card" simple></model-item>
			</view>
		</view>
	</view>
</template>

<script>
import modelItem from '@/components/model-item/model-item.vue'
import Header from '@/components/header.vue'
export default {
	components: {
		modelItem,
		Header
	},
	data() {
		return {
			banners: [],
			noticeList: [],
			modelList: [],
		};
	},
	onLoad() {
		console.log("进入首页");
		let that = this;
		that.http.httpRequest('/index/index','get',{}).then(res => {
			that.modelList = res.data.data.models,
			that.noticeList = res.data.data.notice,
			that.banners = res.data.data.banner	
		}) 	
	},
	methods: {
		// 查看消息详情
		navAdverseDetails(id) {
			uni.navigateTo({
				url: '../message/messageDetail/messageDetail?id=' + id
			})
		},
		// 查看更多消息
		navtoAdverse(index) {
			uni.navigateTo({
				url: '../adverse/adverse'
			})
		},
		// 查看更多资源
		showAllModelFn() {
			uni.switchTab({
				url: '../model/modelList'
			})
		},
	}
};
</script>

<style lang="scss" scoped>
.index {
	padding-bottom: 50px;
}
// 搜索栏
.search {
	z-index: 100;
	position: absolute;
	top: 190rpx;
	font-size: 32rpx;
	left: 20rpx;
	width: 710rpx;
	height: 68rpx;
	margin: 0 auto;
	border-radius: 34rpx;
	background-color: rgba(241, 241, 239, 0.8);
	text-align: center;
	line-height: 68rpx;
	color: #999999;
}
swiper,
.swiper-img {
	width: 100%;
	height: 500rpx !important;
}
.notice-bar {
	width: 690upx;
	margin: 30upx 30upx 0;
	border-radius: 30upx;
}
.new-model-title {
	padding: 30upx;
	.title {
		position: relative;
		padding-left: 10px;
		&::before {
			content: "";
			position: absolute;
			top: 50%;
			left: 0;
			transform: translateY(-50%);
			width: 3px;
			height: 30upx;
			background-color: $color;
		}
	}
	.more {
		color: #999;
		font-size: 24upx;
	}
}
.notice-list {
	padding: 0 50upx;
	line-height: 60upx;
	color: #666666;
	.icon {
		margin-right: 16upx;
	}
}
</style>
